<template>
	<section>
		<el-col :span="24" class="box">
			<el-col :span="24" class="box-header">新增领导</el-col>
			<!--工具条-->
			<el-col :span="24" class="m-l-3" style="height: 56px;">
				<el-form :inline="true" :model="filters">
					<el-form-item>
						<el-select placeholder="请选择部门" v-model="filters.dept">
							<el-option v-for="item in depts" :key="item.ORGANIZATION_ID" :label="item.ORGANIZATION_NAME" :value="item.ORGANIZATION_ID">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="fnGetStaffs">查询</el-button>
					</el-form-item>
					<el-form-item>
						<el-button @click="emitGoBack">返回</el-button>
					</el-form-item>
				</el-form>
			</el-col>
			
			<!--列表-->
			<el-table :data="staffs" border class="m-l-3" style="width: 94%;margin-bottom: 30px;" v-loading="staffsLoading" element-loading-text="拼命加载中">
				<el-table-column prop="USER_ACCOUNT" label="员工账号" width="465">
				</el-table-column>
				<el-table-column prop="USER_NAME" label="员工姓名" width="481">
				</el-table-column>
				</el-table-column>
				<el-table-column label="操作" width="65">
					<template scope="scope">
					    <el-tooltip class="item" effect="dark" content="新增" placement="bottom">
					      	<el-button type="warning" size="mini" icon="custom-add"  @click="fnOpenAddLeader(scope.row.USER_ACCOUNT,scope.row.USER_NAME)"></el-button>
					    </el-tooltip>
					</template>
				</el-table-column>
			</el-table>
			
			<!--新增领导信息-->
			<el-dialog title="新增领导" v-model="addFormVisible" :close-on-click-modal="false" class="add-dialog">
				<el-form :model="addForm" label-width="100px" :rules="addFormRules" ref="addForm">
					<el-form-item label="领导姓名">{{current.name}}</el-form-item>
					<el-form-item label="领导照片">
						<el-upload class="avatar-uploader" :action="'/api/doc/avatar/leader/' + current.account" :show-file-list="false" :on-success="handleAvatarSuccess">
							<img v-if="imageUrl" :src="imageUrl" class="avatar">
							<i v-else class="el-icon-plus avatar-uploader-icon"></i>
						</el-upload>
					</el-form-item>
					<el-form-item label="领导职务">
						<el-input v-model="addForm.Title" placeholder="请输入领导职务"></el-input>
					</el-form-item>
					<el-form-item label="领导职责">
						<el-input v-model="addForm.Remark" type="textarea" :rows="2" placeholder="请输入领导的工作职责"></el-input>
					</el-form-item>
					<el-form-item label="办公室电话">
						<el-input v-model="addForm.Phone" placeholder="请输入领导办公室电话"></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click.native="addFormVisible = false">取消</el-button>
					<el-button type="primary" @click.native="fnAddLeader">提交</el-button>
				</div>
			</el-dialog>
			
		</el-col>
	</section>
</template>

<script>
	import Svc from '../../service/index.js'
	import moment from 'moment'
	export default {
		data() {
				return {
					filters : {
						dept : ''
					},
					depts : [],//所有部门
					staffs : [],
					staffsLoading : false,
					//新增内容
					addForm : {
						Photo : '',//领导头像（提交用）
						Title : '',
						Remark : '',
						Phone : ''
					},
					imageUrl : '', //领导头像（展示用）
					addFormVisible : false,
					//新增验证
					addFormRules : {},
					//当前添加为领导的员工的信息
					current : {
						account : '',
						name : ''
					}
				}
			},
			methods: {
				//自定义事件->返回
				emitGoBack(){
					this.$emit('go-back','list')
				},
				//显示message提示框
	            openMessage : function(msg,type){
	    	        this.$message({
			          	showClose: true,
			          	message: msg,
			          	type: type
			        });
			    },
			    //获取所有部门信息
			    fnGetDepts(){
			    	var that = this
		            Svc.fnGetData('/api/account/alldepts',{},function(res){
		            	if (res.body.ErrCode == 0){
		            		that.depts = res.body.Data
		            	} else {
		            		that.openMessage("部门信息获取失败！",'error')
		            	}
		            },function(res){
		            	that.openMessage("网络错误，请重新！",'error')
		            })
			    },
			    //获取当前部门的员工
			    fnGetStaffs(){
			    	var that = this
		            Svc.fnGetData('/api/account/deptuser/'+that.filters.dept,{},function(res){
		            	if (res.body.ErrCode == 0){
		            		that.staffs = res.body.Data
		            	} else {
		            		that.openMessage("当前部门的员工信息获取失败！",'error')
		            	}
		            },function(res){
		            	that.openMessage("网络错误，请重新！",'error')
		            })
			    },
			    //打开新增领导页面
			    fnOpenAddLeader(account,name){
			    	var that = this
			    	that.addFormVisible = true
			    	that.current.account = account
			    	that.current.name = name
			    	//获取当前领导的原有信息
		      		that.fnGetLeader()
			    },
			    //添加领导照片成功
		        handleAvatarSuccess(res, file) {
		        	this.imageUrl = URL.createObjectURL(file.raw);
		        	this.addForm.Photo = res.Data.Key
		      	},
		      	//获取当前领导的原有信息
		      	fnGetLeader(){
		      		var that = this
		            Svc.fnGetData('/api/leader/detail/' + that.current.account,{},function(res){
		            	if (res.body.ErrCode == 0){
		            		if (res.body.Data) {
		            			that.imageUrl = res.body.Data.Photo
			            		that.addForm.Title = res.body.Data.Title
								that.addForm.Remark = res.body.Data.Remark
								that.addForm.Phone = res.body.Data.Phone
		            		}
		            	} else {
		            		that.openMessage("获取领导信息失败！" + res.body.ErrMsg,'error')
		            	}
		            },function(res){
		            	that.openMessage("网络错误，请重新！",'error')
		            })
		      	},
			    //新增为领导
			    fnAddLeader(){
			    	var that = this
			    	var params = {
			    		EmpID : that.current.account,
						EmpName : that.current.name,
						Photo : that.addForm.Photo,
						Title : that.addForm.Title,
						Remark : that.addForm.Remark,
						Phone : that.addForm.Phone
			    	}
		            Svc.fnPostData('/api/leader/save',params,function(res){
		            	if (res.body.ErrCode == 0){
		            		that.addFormVisible = false
		            		that.emitGoBack()
		            	} else {
		            		that.openMessage("添加领导失败！" + res.body.ErrMsg,'error')
		            	}
		            },function(res){
		            	that.openMessage("网络错误，请重新！",'error')
		            })
			    }
			},
			mounted() {
			    //获取所有部门信息
				this.fnGetDepts()
			}
	}
</script>

<style scoped>
	.m-l-3{
		margin-left: 3%
	}

	.toolbar {
		width: 94%;
	    background: #f2f2f2;
	    padding: 10px;
	    margin: 10px 0;
	    margin-left: 3%;
	    margin-bottom: 30px;
	}
	.box {
		background-color: #fff;
   		box-sizing: border-box;
   		background: #fff;
    	border: 1px solid #d1dbe5;
	    box-shadow: 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04);
		margin-top: 20px;
	}

	.box-header{
		background-color: #eef1f6;
	    border-bottom: 1px solid #d1dbe5;
	    padding: 10px;
	    margin-bottom: 24px;
	    font-size: 15px;
	    color: #48576a;
	}
	
	.avatar-uploader {
	    width: 150px;
    	height: 200px;
	    border: 1px dashed #d9d9d9;
	    border-radius: 6px;
	    cursor: pointer;
	    position: relative;
	    overflow: hidden;
	}
	.avatar-uploader:hover {
	    border-color: #409EFF;
	}
	.avatar-uploader-icon {
	    font-size: 28px;
	    color: #8c939d;
	    width: 150px;
	    height: 200px;
	    line-height: 200px;
	    text-align: center;
	}
	.avatar {
	    width: 150px;
	    height: 200px;
	    display: block;
	}
	
</style>